<template>
  <div class="box">
    <el-form-item label="显示位置">
      <el-select v-model="axisPointer.type" placeholder="提示框类型">
        <el-option label="直线" value="line"></el-option>
        <el-option label="阴影" value="shadow"></el-option>
        <el-option label="十字准星" value="cross"></el-option>
        <el-option label="无" value="none"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="" label-width="0px">
      <div>
        {{ axisPointer.type | axisPointerType }}
      </div>
      <div class="take-care" v-show="axisPointer.type === 'shadow'">
        <span class="el-icon-warning"></span>
        <span> 当选择阴影时，触发类型需要切换到坐标轴，否则不生效 </span>
      </div>
      <div class="p1" v-show="axisPointer.type === 'shadow'">
        <el-form-item label="填充色">
          <el-color-picker
            v-model="axisPointer.shadowStyle.color"
            show-alpha
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="阴影大小">
          <el-input-number
            :step="1"
            :min="0"
            v-model="axisPointer.shadowStyle.shadowBlur"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="阴影颜色">
          <el-color-picker
            v-model="axisPointer.shadowStyle.shadowColor"
            show-alpha
          ></el-color-picker>
        </el-form-item>
      </div>
      <div class="p1" v-show="axisPointer.type === 'line'">
        <el-form-item label="线颜色">
          <el-color-picker
            v-model="axisPointer.lineStyle.color"
            show-alpha
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="线宽">
          <el-input-number
            :step="1"
            :min="0"
            v-model="axisPointer.lineStyle.width"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="线类型">
          <el-select v-model="axisPointer.lineStyle.type">
            <el-option label="实线" value="soild"></el-option>
            <el-option label="虚线" value="dashed"></el-option>
            <el-option label="点线" value="dotted"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="p1" v-show="axisPointer.type === 'cross'">
        <el-form-item label="线颜色">
          <el-color-picker
            v-model="axisPointer.crossStyle.color"
            show-alpha
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="线宽">
          <el-input-number
            :step="1"
            :min="0"
            v-model="axisPointer.crossStyle.width"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="线类型">
          <el-select v-model="axisPointer.crossStyle.type">
            <el-option label="实线" value="soild"></el-option>
            <el-option label="虚线" value="dashed"></el-option>
            <el-option label="点线" value="dotted"></el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "AxisPointer",
  inject: ["father"],
  computed: {
    axisPointer: {
      get() {
        return this.father.echartsOptions.tooltip.axisPointer;
      },
      set(val) {
        this.father.echartsOptions.tooltip.axisPointer = val;
      },
    },
  },
  filters: {
    axisPointerType(val) {
      let type = "";
      switch (val) {
        case "line":
          type = "直线指示器样式";
          break;

        case "shadow":
          type = "阴影指示器样式";
          break;
        case "cross":
          type = "十字准星指示器样式";
          break;
        case "none":
          type = "";
          break;
      }
      return type;
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped>
</style>